<script setup lang="ts">
import { ref, inject, onMounted, computed, watch } from "vue";
// import * as echarts from "echarts";
import chinaJson from "@/assets/json/map/china.json";
import { getCitysInfoByName } from "@/apis/travelService/city";
import { citysInfoType } from "@/apis/interface/myInterface";
import { addCityToWant } from "@/apis/travelService/want";
import { addCityToBeen } from "@/apis/travelService/been";
import { mainStore } from "@/store/user";
import { getFootsByUserId } from "@/apis/travelService/foot";
import {
  getUserFollowersNum,
  getUserFolloweesNum,
} from "@/apis/userService/follow";
import emitter from "@/mitt/event";
import { getRandomArrayElements } from "@/utils/filters/randomArray";
import { timeFormat } from "@/utils/filters/time";
import { client } from "@/utils/oss";
import { updateUserAvater } from "@/apis/userService/user";
import { useRouter } from "vue-router";
const router = useRouter();
emitter.on("addFoot", () => {
  openAlreadyGoDialog();
});
const store = mainStore();
const activeIndex = ref("/personal/center");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const keyword = ref("");
const citysResultList = ref([] as citysInfoType[]);
let timer = null;
const hasNoData = computed(() => {
  return !citysResultList.value.length;
});

watch(keyword, (newValue, oldValue) => {
  // alert(newValue);
  if (timer) {
    clearTimeout(timer);
  }
  if (!newValue) {
    citysResultList.value = [] as citysInfoType[];
    return;
  }
  // @ts-ignore
  timer = setTimeout(async () => {
    let result = [] as citysInfoType[];
    await getCitysInfoByName(newValue)
      .then((res: any) => {
        if (res.code != 0) {
          //@ts-ignore
          ElMessage({
            type: "error",
            message: res.msg,
          });
        } else {
          res.data.forEach((e: citysInfoType) => {
            if (e.cityName.indexOf(newValue) > -1) {
              result.push(e);
            }
          });
        }
      })
      .catch((error) => {
        //@ts-ignore
        ElMessage({
          type: "error",
          message: error.message,
        });
      });
    citysResultList.value = result;
  }, 100);
});

const dialogToWantVisible = ref(false);
const confirmDialogVisible = ref(false);
const theSelectedCity = ref({} as citysInfoType);
let wantOrBeenFlag = false;
const scoreValue = ref(4.5);
const openAlreadyGoDialog = () => {
  wantOrBeenFlag = true;
  dialogToWantVisible.value = true;
};
const openToWantDialog = () => {
  wantOrBeenFlag = false;
  dialogToWantVisible.value = true;
};
const openTheConfirmDialog = (index: number) => {
  confirmDialogVisible.value = true;
  theSelectedCity.value = citysResultList.value[index];
};
const reSelect = () => {
  confirmDialogVisible.value = false;
  theSelectedCity.value = {} as citysInfoType;
};
const addOneCityToWant = async () => {
  if (wantOrBeenFlag === false) {
    await addCityToWant({
      userId: store.userInfo.id,
      cityId: theSelectedCity.value.cityId,
    })
      .then((res: any) => {
        if (res.code != 0) {
          //@ts-ignore
          ElMessage({
            type: "error",
            message: res.msg,
          });
        } else {
          confirmDialogVisible.value = false;
          dialogToWantVisible.value = false;
          keyword.value = "";
          //@ts-ignore
          ElMessage({
            type: "success",
            message: "添加想去成功",
          });
          getThescattersInfo();
        }
      })
      .catch((error) => {
        //@ts-ignore
        ElMessage({
          type: "error",
          message: error.message,
        });
      });
  } else if (wantOrBeenFlag === true) {
    await addCityToBeen({
      userId: store.userInfo.id,
      cityId: theSelectedCity.value.cityId,
      score: scoreValue.value,
    })
      .then((res: any) => {
        if (res.code != 0) {
          //@ts-ignore
          ElMessage({
            type: "error",
            message: res.msg,
          });
        } else {
          confirmDialogVisible.value = false;
          dialogToWantVisible.value = false;
          //@ts-ignore
          ElMessage({
            type: "success",
            message: "添加去过成功",
          });
          getThescattersInfo();
        }
      })
      .catch((error) => {
        //@ts-ignore
        ElMessage({
          type: "error",
          message: error.message,
        });
      });
  } else {
    // @ts-ignore
    ElMessage({
      type: "error",
      message: "未知错误",
    });
  }
};
let scatterDataWant = [];
let scatterDataBeen = [];
/* 获取初始化点标记数据 */
const getThescattersInfo = async () => {
  // alert(222);
  await getFootsByUserId(store.userInfo.id)
    .then((res: any) => {
      if (res.code != 0) {
        //@ts-ignore
        ElMessage({
          type: "error",
          message: res.msg,
        });
      } else {
        if (res.data && res.data.wants) {
          // alert(333);
          res.data.wants.forEach((e) => {
            // @ts-ignore
            scatterDataWant.push({
              name: e.cityName,
              value: e.pos,
              introduction: e.introduction,
            });
          });
        }
        if (res.data && res.data.beens) {
          res.data.beens.forEach((e) => {
            // @ts-ignore
            scatterDataBeen.push({
              name: e.cityName,
              value: e.pos,
              score: e.score,
              introduction: e.introduction,
            });
          });
        }
        console.log(scatterDataWant);
        console.log(scatterDataBeen);
      }
    })
    .catch((error) => {
      //@ts-ignore
      ElMessage({
        type: "error",
        message: error.message,
      });
    });
  initEcharts(scatterDataWant, scatterDataBeen); //要获取数据之后再初始化
};
getThescattersInfo();

/* 用户基本信息 */
const followerNum = ref(0);
const followeeNum = ref(0);
const getFollowerNum = () => {
  getUserFollowersNum(store.userInfo.id)
    .then((res: any) => {
      if (res.code != 0) {
        //@ts-ignore
        ElMessage({
          type: "error",
          message: res.msg,
        });
      } else {
        followerNum.value = res.data;
      }
    })
    .catch((error) => {
      //@ts-ignore
      ElMessage({
        type: "error",
        message: error.message,
      });
    });
};
getFollowerNum();
const getFolloweeNum = () => {
  getUserFolloweesNum(store.userInfo.id)
    .then((res: any) => {
      if (res.code != 0) {
        //@ts-ignore
        ElMessage({
          type: "error",
          message: res.msg,
        });
      } else {
        followeeNum.value = res.data;
      }
    })
    .catch((error) => {
      //@ts-ignore
      ElMessage({
        type: "error",
        message: error.message,
      });
    });
};
getFolloweeNum();
onMounted(() => {
  // alert(111);
  // alert(store2.getUserFlag);
  // alert(JSON.stringify(store2.userInfo));
});
/* 随机勋章 */
const medalsArray = [
  "/static/images//medal/medal1.jpg",
  "/static/images//medal/medal2.jpg",
  "/static/images//medal/medal3.jpg",
  "/static/images//medal/medal4.jpg",
  "/static/images//medal/medal5.jpg",
  "/static/images//medal/medal6.jpg",
] as Array<string>;
let finalMedalsArray = [] as Array<string>;
const getShuffleMedals = () => {
  finalMedalsArray = getRandomArrayElements(
    medalsArray,
    Math.floor(Math.random() * 6) + 1
  );
};
getShuffleMedals();

/* 更换头像 */
let avaterUrl = "";
const httpRequest = (e) => {
  // console.log(e)
  let file = e.file; // 文件信息
  if (!file) {
    return false;
  } else if (!/\.(png|jpg)$/.test(file.name.toLowerCase())) {
    // 格式根据自己需求定义
    //@ts-ignore
    ElMessage({
      type: "error",
      message: "上传格式不正确，请上传png或者jpg格式",
    });
    return false;
  }
  let filename = file.name;
  console.log(filename);
  const times = new Date().getTime();
  console.log(times);
  client.put(`${times}.png`, file);
  avaterUrl =
    "http://noteimg123.oss-cn-hangzhou.aliyuncs.com/" + times + ".png";
  uploadAvater();
  // setTimeout(() => {
  //   client.list().then((res) => {
  //     console.log(res);
  //     res.objects.forEach((e) => {
  //       if (e.name === times + ".png") {
  //         alert(e.name);
  //       }
  //     });
  //   });
  // }, 1000);
};
const uploadAvater = () => {
  updateUserAvater(store.userInfo.id, avaterUrl)
    .then((res: any) => {
      if (res.code != 0) {
        //@ts-ignore
        ElMessage({
          type: "error",
          message: res.msg,
        });
      } else {
        //@ts-ignore
        ElMessage({
          type: "success",
          message: "修改成功，请重新登录~",
        });
        store.logout();
        setTimeout(() => {
          router.replace("/login");
        }, 1000);
      }
    })
    .catch((error) => {
      //@ts-ignore
      ElMessage({
        type: "error",
        message: error.message,
      });
    });
};
</script>
<template>
  <div class="personal-info-container">
    <div class="avater-container">
      <img :src="store.userInfo?.url" class="avater-img" />
    </div>
    <div class="change-avater">
      <el-upload
        class="upload-demo"
        action=""
        multiple
        accept=".png,.jpg"
        :show-file-list="false"
        :http-request="httpRequest"
        :limit="1"
      >
        <el-button type="primary">更换头像</el-button>
      </el-upload>
    </div>
    <div class="info-border">
      <el-descriptions :title="store.userInfo.name">
        <el-descriptions-item label="访问量"
          ><span class="visit-num">{{
            store.userInfo.visits
          }}</span></el-descriptions-item
        >
        <el-descriptions-item label="邮箱">{{
          store.userInfo.email
        }}</el-descriptions-item>
        <el-descriptions-item label="所在地">{{
          store.userInfo.address
        }}</el-descriptions-item>
        <el-descriptions-item label="等级">
          <el-tag size="medium" style="font-weight: 600">{{
            store.userInfo.grade
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="个性签名">{{
          store.userInfo.signature
        }}</el-descriptions-item>
        <el-descriptions-item label="加入爱旅游时间">{{
          // @ts-ignore
          timeFormat(store.userInfo.createTime)
        }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="more-info-border">
      <el-collapse>
        <el-collapse-item title="详细资料">
          <div>
            <el-descriptions>
              <el-descriptions-item label="性别">{{
                store.userInfo.gender
              }}</el-descriptions-item>
              <el-descriptions-item label="电话">{{
                store.userInfo.tele
              }}</el-descriptions-item>
              <el-descriptions-item label="出生日期">{{
                store.userInfo.birthday
              }}</el-descriptions-item>
              <el-descriptions-item label="经验值">{{
                store.userInfo.experience
              }}</el-descriptions-item>
              <el-descriptions-item label="岗位">{{
                store.userInfo.post
              }}</el-descriptions-item>
              <el-descriptions-item label="职业">{{
                store.userInfo.profession
              }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.all-media-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .media-img-container {
    cursor: pointer;
    float: left;
    width: 30px;
    height: 40px;
    margin: 5px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
#map-container {
  width: 100%;
  height: 600px;
  margin: 0px auto;
  margin-top: 10px;
  // border: 1px #e8604c solid;
  // background-color: rgba(0, 243, 255, 0.1);
  // background-color: rgba(244, 143, 128, 0.1);
  // background-color: rgba(49,48,65, 0.1);
  // background-color: rgba(39,106,206, 0.1);
  // background: linear-gradient(to right, #ff9569 0%, #e92758 100%);
  background: linear-gradient(
    -90deg,
    rgba(238, 83, 22, 0.3) 0%,
    rgba(213, 62, 20, 0.6) 100%
  );
}
// ::v-deep .el-descriptions {
//   width: 900px;
// }
.personal-info-container {
  width: 100%;
  min-height: 150px;
  margin: 0 auto;
  // margin-bottom: 10px;
  border-top: 2px #e8604c solid;
  border-bottom: 2px #e8604c solid;

  // background-color: #f7f2ea;
  // background-color: rgba(49, 48, 65, 0.1);
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .info-border {
    padding-top: 15px;
    width: 1000px;
    height: auto;
    float: left;
    margin-left: 200px;
    .visit-num {
      font-size: 20px;
      font-weight: 700;
      color: #e8604c;
    }
  }
  .more-info-border {
    width: 1000px;
    height: auto;
    margin-left: 200px;
  }
  .button-already {
    width: 150px;
    height: 40px;
    // border: 1px #e8604c solid;
    position: absolute;
    top: -160px;
    right: 30px;
    z-index: 100;
    background-color: #e8604c;
    border-radius: 10px;
    cursor: pointer;
    color: #ffffff;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s linear;
  }
  .button-already:hover {
    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
    transform: translate(0, -3px);
  }
  .button-want {
    width: 150px;
    height: 40px;
    // border: 1px #e8604c solid;
    position: absolute;
    top: -100px;
    right: 30px;
    z-index: 100;
    background-color: #e8604c;
    border-radius: 10px;
    cursor: pointer;
    color: #ffffff;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s linear;
  }
  .button-want:hover {
    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
    transform: translate(0, -3px);
  }
  .avater-container {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    position: absolute;
    top: -75px;
    // border: 1px #e8604c solid;
    margin-left: 30px;
    .avater-img {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 75px;
      background-color: #f7f2ea;
    }
  }
}
.header-nav-container {
  width: 100%;
  height: 60px;
  // margin: 0 auto;
  // border: 1px #e8604c solid;
  .el-menu-demo {
    display: flex;
    justify-content: space-around;
  }
}
.main-container {
  display: flex;
  justify-content: space-between;
  width: 1100px;
  min-height: 500px;
  margin: 0px auto;
  // border: 1px #e8604c solid;
  // box-shadow: var(--el-box-shadow-light);
  margin-top: 10px;
  .main-left {
    width: 220px;
    // border: 1px #e8604c solid;
    box-shadow: var(--el-box-shadow-lighter);
    background-color: #f7f2ea;
    display: flex;
    flex-direction: column;
    align-items: center;
    .follower {
      width: 200px;
      height: 140px;
      // border: 1px #e8604c solid;
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      > div {
        width: 200px;
        height: 60px;
        // border: 1px #e8604c solid;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        box-shadow: var(--el-box-shadow-light);
        border-radius: 3px;

        > div {
          width: 155px;
          border-radius: 5px;
          height: 45px;
          background-color: #e8604c;
          display: flex;
          justify-content: center;
          align-items: center;
          a {
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
          }
          a:hover {
            color: #303133;
          }
        }
      }
    }
    .card-header {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #e8604c;
      border-radius: 5px;
      span {
        font-size: 16px;
        font-weight: 600;
        color: #ffffff;
      }
    }
    .text {
      font-size: 14px;
    }
    .item {
      margin-bottom: 18px;
    }
    .box-card {
      width: 200px;
      margin: 5px 0;
    }
  }
  .main-body {
    width: 850px;
    // border: 1px #e8604c solid;
    box-shadow: var(--el-box-shadow-lighter);
    background-color: #f7f2ea;
  }
  .thm-btn {
    width: 100px;
    height: 35px;
    padding: 0;
  }
  .textarea-message {
    padding: 10px 20px;
  }
}
.search-citys {
  display: flex;
  justify-content: center;
  .input-box {
    position: relative;
    display: inline-block;
    .search-input {
      padding: 0 40px 0 20px;
      width: 160px;
      height: 38px;
      font-size: 14px;
      border: 1px solid #eee;
      border-radius: 40px;
      background: #eee;
      transition: width 0.2s;
      transition-delay: 0.1s;
      color: #606266;
    }
    .search-input:focus {
      width: 350px;
      outline: none;
      box-shadow: none;
    }
    .search-input:focus + .search-span {
      background-color: #f48f80;
      color: #fff;
    }
    .search-span {
      position: absolute;
      top: 4px;
      right: 5px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      padding: 0;
      color: #d4d7de;
      text-align: center;
      background: #e8604c;
      border-radius: 50%;
      font-size: 15px;
      cursor: pointer;
      i {
        height: 30px; /* 让图标居中的方案 */
      }
    }
    .search-result-content {
      width: auto;
      height: auto;
      // border: 1px #e8604c solid;
      // background-color: rgba(0, 0, 0, 0.311);
      border-radius: 5px;
      .result-list {
        padding-left: 10px;
        padding-right: 10px;
        > li {
          list-style: none;
          line-height: 2em;
          padding-top: 5px;
          cursor: pointer;
          transition: all 0.1s linear;
          padding-left: 5px;
          border-bottom: 1px solid #e0e0e0;
        }
        > li:hover {
          // background-color: #f48f80;
          color: #e8604c;
          font-weight: 700;
        }
      }
    }
  }
}
/* 更改头像 */
.change-avater {
  width: 100px;
  height: 50px;
  position: absolute;
  top: 90px;
  // border: 1px #e8604c solid;
  margin-left: 55px;
  display: flex;
  justify-content: center;
}
</style>
